@media (max-width: 1240px){
    .AppSection{
        width: 1200px;
        padding: 0 20px 10px 20px;      
        margin: 0;  
    }

}
@media (min-width: 1240px){
    .AppSection{
        width: 80%;
        padding: 0 5% 2% 5%;
        margin-left: auto;
        margin-right: auto;
    }
}
@keyframes flowup{
    from {
        opacity: 0;
        transform: translateY(30px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}
.AppSection{
    height: 450px;
}
.App-Section-App-Nav{
    width: 20%;
    float: left;
}
.App-Section-App-Show-Panel{
    float: left;
    width: 80%;
    padding-top: 100px;
}
.App-Section-App{
    float: left;
    margin: 5px 0 5% 6%;
    width: 81px;
    height: 96px;
    text-decoration: none;
    overflow: visible;
    transition: all .3s;
    animation-duration: 0.5s;
    animation-name: flowup;
}
.App-Section-App:hover{
    transform: scale(1.2,1.2)
}
.App-Section-App-Name{
    text-align: center;
    color: black;
}
.App-Section-App-Icon{
    margin-left: 6px;
    border-radius: 10px;
    background: white;
    padding: 5px;
    width: 59px;
    height: 59px;
}
.App-Section-App-Nav-Button-Container{
    display: block;
    height: 80px;
    transform: translateX(25px)
}
.App-Section-App-Nav-Button{
    width: 180px;
    font-size: 25px;
    padding: 10px 0 10px 0;
    text-align: right;
    border-radius: 28px;
    color: white;
    float: left;
    transition: all .3s;
}
.App-Section-App-Nav-Button-Container:hover>.App-Section-App-Nav-Button{
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .6);
    width: 200px;
}
.App-Section-App-Nav-Button-Container:hover>.App-Section-App-Nav-Button>span.triangle{
    margin: 5px 14px 5px 45px;
    opacity: 1;
}
.App-Section-App-Nav-Button:hover{
    cursor: pointer;
}
.App-Section-App-Nav-Button-Left:hover{
    cursor: pointer;
}
.App-Section-App-Nav-Button-Container-Active>.App-Section-App-Nav-Button{
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .6);
    width: 200px;
}
.App-Section-App-Nav-Button-Container-Active>.App-Section-App-Nav-Button>span.triangle{
    margin: 5px 14px 5px 45px;
    opacity: 1;
}
.App-Section-App-Nav-Button-Left{
    transform: translate(-20px,44px);
}
.App-Section-App-Nav-Button-Left>.Half-Circle{
    border: 4px solid white;
    height: 16px;
    width: 50px;
    border-left: none;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    padding: 4px;
}
.Half-Circle>.Small-Circle{
    border: 4px solid white;
    height: 8px;
    width: 15px;
    float: right;
    margin-right: 5px;
    border-radius: 50%;
}
.App-Section-Bg-0{
    background: rgba(255, 221, 116, 1)
}
.App-Section-Bg-1{
    background: rgba(122, 189, 173, 1)
}
.App-Section-Bg-2{
    background: rgba(99, 173, 255, 1)
}
.App-Section-Bg-3{
    background: rgba(173, 206, 123, 1)
}
.App-Section-Bg-4{
    background: rgba(255, 116, 122, 1)
}
span.triangle{
    float: right;
    display: block;
    margin: 5px 14px 5px 25px;
    width: 0;
    height: 0;
    opacity: 0;
    border-style: solid;
    border-width: 12px 0 12px 18px;
    border-color: transparent transparent transparent #ffffff;
    transition: all .3s;
}
.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}